<template>
  <div class="page-frame">
    <!-- 现金雨背景活动 -->
    <div
      class="container"
      @click="
        () => {
          emits('cloturePopup');
        }
      "
    >
      <div
        v-for="n in cashItems"
        :key="n.id"
        class="cash"
        :style="n.style"
        :class="n.className"
        @animationend="removeCash(n.id)"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
const cashItems = reactive(generateCash(300)); // 初始生成 30 个

// // 定期增加新现金元素
// setInterval(() => {
//   if (cashItems.length < 500) {
//     cashItems.push(createCash(), createCash());
//   }
// }, 25);
// 使用 requestAnimationFrame 增加新的钞票元素
function addCash() {
  if (cashItems.length < 500) {
    cashItems.push(createCash(), createCash()); // 每次添加两个
  }
  requestAnimationFrame(addCash); // 循环添加
}

requestAnimationFrame(addCash); // 开始循环添加

// 动画结束时移除元素
const removeCash = id => {
  const index = cashItems.findIndex(item => item.id === id);
  if (index !== -1) {
    cashItems.splice(index, 1);
  }
};

// 生成单个现金元素
function createCash() {
  const left = Math.random() * 100; // 随机水平位置
  const delay = Math.random() * 5; // 随机延迟
  const duration = 3 + Math.random() * 2; // 随机下落时间
  const size = 40 + Math.random() * 30; // 随机大小
  const animationIndex = Math.floor(Math.random() * 4) + 1; // 随机选择一个动画
  return {
    id: Date.now() + Math.random(),
    className: `scatter${animationIndex}`,
    style: {
      left: `${left}%`,
      animationDelay: `${delay}s`,
      animationDuration: `${duration}s`,
      width: `${size}px`,
      height: `${size * 0.5}px`,
    },
  };
}

// 生成多个现金元素
function generateCash(count) {
  return Array.from({ length: count }, createCash);
}
const emits = defineEmits(["cloturePopup"]);
</script>

<style scoped lang="less">
.page-frame {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.cash {
  position: absolute;
  top: -80px;
  background-image: url("@/image/new_img/moey.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation-fill-mode: forwards;
  // animation: scatter3 linear forwards;
}
/* 钞票散落动画1 */
.scatter1 {
  animation: scatter1 linear forwards;
}

/* 钞票散落动画2 */
.scatter2 {
  animation: scatter2 linear forwards;
}

/* 钞票散落动画3 */
.scatter3 {
  animation: scatter3 linear forwards;
}

/* 钞票散落动画4 */
.scatter4 {
  animation: scatter4 linear forwards;
}

/* 动画路径定义 */
@keyframes scatter1 {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) translateX(-30px) rotate(180deg);
  }
}

@keyframes scatter2 {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) translateX(30px) rotate(-180deg);
  }
}

@keyframes scatter3 {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) translateX(-60px) rotate(360deg);
  }
}

@keyframes scatter4 {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) translateX(60px) rotate(-360deg);
  }
}
</style>
